/* eslint-disable vue/order-in-components */
<template>
  <div class="data-statistics">
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/index/jjxt-index-background.png')})`" />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar active-item="/index" />
    <!--    <navbarIndex />-->
    <el-row style="height: 30%;">
      <el-col v-loading="loading.loading4">
        <p class="p_title">缺陷基本信息</p>
        <hr style="color: #EBEEF5;margin-left: 10px;">
        <div class="v-flex col-div" style="height: 75%;">
          <div class="basic-div">
            <div class="itemrow-item" @click="tagLink"><p>缺陷总数</p><span>{{ defectBasicInfo.total }}</span></div>
            <div class="itemrow-item" @click="tagLink"><p>已销号</p><span>{{ defectBasicInfo.dealed }}</span></div>
            <div class="itemrow-item" @click="tagLink"><p>未销号</p><span>{{ defectBasicInfo.undealed }}</span></div>
          </div>
          <div class="basic-div">
            <div class="itemrow-item" @click="tagLink"><p>一级缺陷总数</p><span>{{ defectBasicInfo.classOne }}</span></div>
            <div class="itemrow-item" @click="tagLink"><p>二级A类缺陷总数</p><span>{{ defectBasicInfo.classTwoA }}</span></div>
            <div class="itemrow-item" @click="tagLink"><p>二级B类缺陷总数</p><span>{{ defectBasicInfo.classTwoB }}</span></div>
          </div>
        </div>
      </el-col>
      <el-col v-loading="loading.loading2" style="max-width:350px;min-width:200px;position:relative;margin-left: -10px;">
        <p class="p_title">检测计划超期预警情况</p>
        <hr style="color: #EBEEF5;margin-right: 10px;">
        <div class="col-div" style="height:75%;">
          <div class="basic-div">
            <div class="itemrow-item1" style="height: 56px;" @click="tagLink">
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 5px;margin-left: 30px;">1C：</div><div style="font-weight: bold;float: left;font-size: 13px;">1</div>
              </div>
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 5px;margin-left: 30px;">2C：</div><div style="font-weight: bold;float: left;font-size: 13px;">4</div>
              </div>
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 5px;margin-left: 30px;">4C：</div><div style="font-weight: bold;float: left;font-size: 13px;">5</div>
              </div>
            </div>
            <img
              style="margin-top:10px;width: 56px;height: 56px;margin-right: 40px;"
              :src="require('../../../assets/svg/超期带框2.svg')"
              fit="fill"
              @click="tagLink">
          </div>
          <div class="basic-div">
            <div class="itemrow-item2" style="height: 56px;margin-top: 5px;" @click="tagLink">
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 5px;margin-left: 30px;">1C：</div><div style="font-weight: bold;float: left;font-size: 13px;">9</div>
              </div>
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 5px;margin-left: 30px;">2C：</div><div style="font-weight: bold;float: left;font-size: 13px;">3</div>
              </div>
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 5px;margin-left: 30px;">4C：</div><div style="font-weight: bold;float: left;font-size: 13px;">7</div>
              </div>
            </div>
            <img
              style="margin-top:5px;width: 56px;height: 56px;margin-right: 40px;"
              :src="require('../../../assets/svg/预警带框2.svg')"
              fit="fill"
              @click="tagLink">
          </div>
        </div>
      </el-col>
      <el-col v-loading="loading.loading3">
        <p class="p_title" style="margin-bottom: 15px;">预警信息</p><p style="margin-top: -30px;margin-left: 80%;font-size: 13px;">更多 &gt;&gt;&gt;</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div class="v-flex col-div" style="margin-left: 20px;margin-top: 3px;height:70%;overflow:auto;">
          <div v-for="o in data1" :key="o" class="text item">
            <li style="margin-top: 7px;margin-bottom: 2px;font-size: 14px;">{{ o }}<p style="margin-top: -20px;margin-left: 75%;">2021-07-06</p></li>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="height: 25%;">
      <el-col v-loading="loading.loading1">
        <p class="p_title">本年度检测计划完成率</p>
        <hr style="color: #EBEEF5;margin-left: 10px;">
        <div class="v-flex col-div" style="height:48%;">
          <div style="float: left;margin-top: 20px;">
            <p style="float: left;">1C</p>
            <el-progress :stroke-width="9" :percentage="92" style="margin-left: 30px;width: 85%;float: left;" />
          </div>
          <div style="float: left;margin-top: 20px;">
            <p style="float: left;">2C</p>
            <el-progress :stroke-width="9" :percentage="98" style="margin-left: 30px;width: 85%;float: left;" />
          </div>
          <div style="float: left;margin-top: 20px;">
            <p style="float: left;">4C</p>
            <el-progress :stroke-width="9" :percentage="80" style="margin-left: 30px;width: 85%;float: left;" />
          </div>
        </div>
      </el-col>
      <el-col v-loading="loading.loading5" style="max-width:350px;min-width:200px;position:relative;margin-left: -10px;">
        <p class="p_title">缺陷超期预警情况</p>
        <hr style="color: #EBEEF5;margin-right: 10px;">
        <div class="col-div" style="height:75%;">
          <div class="basic-div">
            <div class="itemrow-item1" style="height: 48px;" @click="tagLink">
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 3px;margin-left: 30px;">一级：</div><div style="font-weight: bold;float: left;font-size: 12px;">23</div>
              </div>
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 3px;margin-left: 30px;">二级A类：</div><div style="font-weight: bold;float: left;font-size: 12px;">12</div>
              </div>
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 3px;margin-left: 30px;">二级B类：</div><div style="font-weight: bold;float: left;font-size: 12px;">35</div>
              </div>
            </div>
            <img
              style="margin-top:10px;width: 48px;height: 48px;margin-right: 40px;"
              :src="require('../../../assets/svg/超期带框2.svg')"
              fit="fill"
              @click="tagLink">
          </div>
          <div class="basic-div">
            <div class="itemrow-item2" style="height: 48px;margin-top: 5px;" @click="tagLink">
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 3px;margin-left: 30px;">一级：</div><div style="font-weight: bold;float: left;font-size: 12px;">11</div>
              </div>
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 3px;margin-left: 30px;">二级A类：</div><div style="font-weight: bold;float: left;font-size: 12px;">19</div>
              </div>
              <div>
                <div align="right" style="width: 80px;float: left;font-size: 3px;margin-left: 30px;">二级B类：</div><div style="font-weight: bold;float: left;font-size: 12px;">35</div>
              </div>
            </div>
            <img
              style="margin-top:5px;width: 48px;height: 48px;margin-right: 40px;"
              :src="require('../../../assets/svg/预警带框2.svg')"
              fit="fill"
              @click="tagLink">
          </div>
        </div>
      </el-col>
      <el-col v-loading="loading.loading6">
        <p class="p_title">检测设备资产</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div class="v-flex col-div" style="height:75%;">
          <div class="basic-div">
            <div class="itemrow-item" @click="tagLink"><p>1C检测设备</p><span>{{ deviceInfo.deviceNum_1C }}</span></div>
            <div class="itemrow-item" @click="tagLink"><p>2C检测设备</p><span>{{ deviceInfo.deviceNum_2C }}</span></div>
            <div class="itemrow-item" @click="tagLink"><p>3C检测设备</p><span>{{ deviceInfo.deviceNum_3C }}</span></div>
          </div>
          <div class="basic-div">
            <div class="itemrow-item" @click="tagLink"><p>4C检测设备</p><span>{{ deviceInfo.deviceNum_4C }}</span></div>
            <div class="itemrow-item" @click="tagLink"><p>5C检测设备</p><span>{{ deviceInfo.deviceNum_5C }}</span></div>
            <div class="itemrow-item" @click="tagLink"><p>6C检测设备</p><span>{{ deviceInfo.deviceNum_6C }}</span></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="height: 35%;">
      <el-col v-loading="loading.loading7" :span="8" style="max-width:400px;min-width:330px;position:relative;">
        <p class="p_title">6C分析进度</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div class="v-flex col-div" style="height:75%;">
          <div class="col-div" align="center" style="width: 100%;">
            <div id="chart1" class="col-div" style="width: 33%;height:100%;float: left;margin-top: -15px;" @click="tagLink" />
            <div id="chart2" class="col-div" style="width: 33%;height:100%;float: left;margin-top: -15px;" @click="tagLink" />
            <div id="chart3" class="col-div" style="width: 33%;height:100%;float: left;margin-top: -15px;" @click="tagLink" />
          </div>
          <div class="col-div" align="center" style="width: 100%;">
            <div id="chart4" class="col-div" style="width: 33%;height:100%;float: left;margin-top: -20px;" @click="tagLink" />
            <div id="chart5" class="col-div" style="width: 33%;height:100%;float: left;margin-top: -20px;" @click="tagLink" />
            <div id="chart6" class="col-div" style="width: 33%;height:100%;float: left;margin-top: -20px;" @click="tagLink" />
          </div>
        </div>
      </el-col>
      <el-col v-loading="loading.loading8">
        <p class="p_title">缺陷单位分布</p>
        <hr style="color: #EBEEF5;margin-left: 10px;margin-right: 10px;">
        <div class="v-flex col-div" style="height:75%;">
          <div id="chart7" class="col-div" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import '@/styles/jjxt/index.css'
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar'
import { NavbarIndex } from '../../layout/components'
import echarts from 'echarts'
import { mapGetters } from 'vuex'
import { getDefectBasicData, getDefectSectionTableList, getDeviceStatic } from '@/api/cms/index/index'
import {
  DeptYearPlanCompletionRate,
  getPlanCompletionRate
} from '@/api/cms/Inspection-management/Inspection-plan-management/InspectionPlanManagementIndex'
export default {
  name: 'Index',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    NavbarIndex,
    TopNavigationBar
  },
  data() {
    return {
      defectBasicInfo: {
        'classOne': 0,
        'classTwoA': 0,
        'classTwoB': 0,
        'dealed': 0,
        'total': 0,
        'undealed': 0
      },
      deviceInfo: {
        'deviceNum_1C': 0,
        'deviceNum_2C': 0,
        'deviceNum_3C': 0,
        'deviceNum_4C': 0,
        'deviceNum_5C': 0,
        'deviceNum_6C': 0
      },
      data1: ['关于定位器掉落事故的提醒',
        '近期鸟窝多发',
        '近期吊弦不受力多发',
        '关于加强分析技能培训的通知',
        '关于加强零部件松脱分析的通知',
        '近期树木侵限多发',
        '近期吊弦不受力多发情况'],
      railTypeSwitch: 0,
      railTypes: [],
      loading: {
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        loading5: false,
        loading6: false,
        loading7: false,
        loading8: false
      },
      myChart1: null,
      myChart2: null,
      myChart3: null,
      // colorList: ['#4962FC','#F59A23','#dd3ee5','#12e78c','#fe8104','#01C2F9','#F4CB29','#FD9E06'],//'#4B7CF3'
      // colorList: ['#98D87D','#FFCC00','#8996E6','#FF99CC','#FFD86E'],
      colorList: ['#2DB7F5', '#808BC6', '#F9BF00', '#7DC856']
    }
  },
  created() {},
  // eslint-disable-next-line vue/order-in-components
  computed: {
    ...mapGetters(['sidebar'])
  },
  // eslint-disable-next-line vue/order-in-components
  watch: {
    'sidebar.opened': function(val) {
      var that = this
      setTimeout(function() {
        that.myChart1.resize()
        that.myChart2.resize()
        that.myChart3.resize()
      }, 500)
    }
  },
  mounted() {
    var that = this
    this.timer = setTimeout(function() {
      that.tabshow = false
    }, 5000)
    this.getData()
    // 监听屏幕变化，改变echarts尺寸
    const _this = this
    this.myresize = window.addEventListener('resize', function() {
      _this.$nextTick(_ => {
        if (_this.myChart1)_this.myChart1.resize()
        if (_this.myChart2)_this.myChart2.resize()
        if (_this.myChart3)_this.myChart3.resize()
      })
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.myresize)
    if (this.myChart1) {
      this.myChart1.dispose()
      this.myChart1 = null
    }
    if (this.myChart2) {
      this.myChart2.dispose()
      this.myChart2 = null
    }
    if (this.myChart3) {
      this.myChart3.dispose()
      this.myChart3 = null
    }
  },
  methods: {
    getData() {
      this.getDefectBasicData()
      this.getDeviceStatic()
      this.getChart1()
      this.getChart2()
    },
    getDefectBasicData() {
      this.loading.loading4 = true
      getDefectBasicData().then(response => {
        this.defectBasicInfo = response.data[0]
        this.loading.loading4 = false
      }).catch(_ => {
        this.loading.loading4 = false
      })
    },
    getDeviceStatic() {
      this.loading.loading6 = true
      getDeviceStatic().then(response => {
        if (response.data != null) {
          this.deviceInfo = response.data
        }
        this.loading.loading6 = false
      }).catch(_ => {
        this.loading.loading6 = false
      })
    },
    getChart1() {
      const myChart1 = echarts.init(document.getElementById('chart1'))
      const myChart2 = echarts.init(document.getElementById('chart2'))
      const myChart3 = echarts.init(document.getElementById('chart3'))
      const myChart4 = echarts.init(document.getElementById('chart4'))
      const myChart5 = echarts.init(document.getElementById('chart5'))
      const myChart6 = echarts.init(document.getElementById('chart6'))
      const option1 = {
        color: ['#81898B', '#eeeeee'],
        title: {
          text: '1C',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal'
          },
          x: 'center',
          y: 'bottom',
          padding: -3
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 关闭放大动画
            selectedOffset: 0, // 选中块的偏移量
            label: {
              show: false,
              position: 'center',
              formatter: '{d}%'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 25,
                name: '已完成',
                selected: true, // 默认选中第一块
                label: {
                  show: true, // 默认显示第一块
                  fontSize: '14',
                  fontWeight: 'normal'
                }},
              { value: 75, name: '未完成' }
            ]
          }
        ]
      }
      const option2 = {
        color: ['#98D87D', '#eeeeee'],
        title: {
          text: '2C',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal'
          },
          x: 'center',
          y: 'bottom',
          padding: -2
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 关闭放大动画
            selectedOffset: 0, // 选中块的偏移量
            label: {
              show: false,
              position: 'center',
              formatter: '{d}%'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 100,
                name: '已完成',
                selected: true, // 默认选中第一块
                label: {
                  show: true, // 默认显示第一块
                  fontSize: '14',
                  fontWeight: 'normal'
                }},
              { value: 0, name: '未完成' }
            ]
          }
        ]
      }
      const option3 = {
        color: ['#F38152', '#eeeeee'],
        title: {
          text: '3C',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal'
          },
          x: 'center',
          y: 'bottom',
          padding: -2
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 关闭放大动画
            selectedOffset: 0, // 选中块的偏移量
            label: {
              show: false,
              position: 'center',
              formatter: '{d}%'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 50,
                name: '已完成',
                selected: true, // 默认选中第一块
                label: {
                  show: true, // 默认显示第一块
                  fontSize: '14',
                  fontWeight: 'normal'
                }},
              { value: 50, name: '未完成' }
            ]
          }
        ]
      }
      const option4 = {
        color: ['#F38152', '#eeeeee'],
        title: {
          text: '4C',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal'
          },
          x: 'center',
          y: 'bottom',
          padding: -2
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 关闭放大动画
            selectedOffset: 0, // 选中块的偏移量
            label: {
              show: false,
              position: 'center',
              formatter: '{d}%'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 35,
                name: '已完成',
                selected: true, // 默认选中第一块
                label: {
                  show: true, // 默认显示第一块
                  fontSize: '14',
                  fontWeight: 'normal'
                }},
              { value: 65, name: '未完成' }
            ]
          }
        ]
      }
      const option5 = {
        color: ['#98D87D', '#eeeeee'],
        title: {
          text: '5C',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal'
          },
          x: 'center',
          y: 'bottom',
          padding: -2
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 关闭放大动画
            selectedOffset: 0, // 选中块的偏移量
            label: {
              show: false,
              position: 'center',
              formatter: '{d}%'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 90,
                name: '已完成',
                selected: true, // 默认选中第一块
                label: {
                  show: true, // 默认显示第一块
                  fontSize: '14',
                  fontWeight: 'normal'
                }},
              { value: 10, name: '未完成' }
            ]
          }
        ]
      }
      const option6 = {
        color: ['#81898B', '#eeeeee'],
        title: {
          text: '6C',
          textStyle: {
            fontSize: 12,
            fontWeight: 'normal'
          },
          x: 'center',
          y: 'bottom',
          padding: -2
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, // 关闭放大动画
            selectedOffset: 0, // 选中块的偏移量
            label: {
              show: false,
              position: 'center',
              formatter: '{d}%'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 20,
                name: '已完成',
                selected: true, // 默认选中第一块
                label: {
                  show: true, // 默认显示第一块
                  fontSize: '14',
                  fontWeight: 'normal'
                }},
              { value: 80, name: '未完成' }
            ]
          }
        ]
      }
      myChart1.setOption(option1)
      myChart2.setOption(option2)
      myChart3.setOption(option3)
      myChart4.setOption(option4)
      myChart5.setOption(option5)
      myChart6.setOption(option6)
    },
    getChart2() {
      this.loading.loading8 = true
      const myChart = echarts.init(document.getElementById('chart7'))
      getDefectSectionTableList({}).then(response => {
        console.log(response)
        const option = {
          color: this.colorList,
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['缺陷总数', '已销号数', '未销号', '销号率']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['广州供电段', '长沙供电段', '深圳供电段', '衡阳供电段', '怀化供电段', '海口综合维修段']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 10000,
              interval: 2000,
              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              type: 'value',
              name: '',
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          series: [
            {
              name: '缺陷总数',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              yAxisIndex: 0,
              data: [1123, 1211, 3233, 2121, 3211, 4122]
            },
            {
              name: '已销号数',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              yAxisIndex: 0,
              data: [2311, 1333, 2111, 4132, 3221, 1332]
            },
            {
              name: '未销号',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              yAxisIndex: 0,
              data: [2113, 2230, 1111, 912, 3321, 1223]
            },
            {
              name: '销号率',
              type: 'line',
              emphasis: {
                focus: 'series'
              },
              yAxisIndex: 1,
              data: [23, 23, 11, 62, 92, 33]
            }
          ]
        }
        myChart.setOption(option)
        this.loading.loading8 = false
      })
    },
    tagLink() {
      this.$router.push('/cmsIndex')
    }
  }
}
</script>

<style scoped lang="scss">
.data-statistics{
  width: 100%;
  min-height: 100%;
  background: #F1F4FB;
  padding: 0px;
  overflow-y: auto;
  .hide-tab{
    padding-top: 6px;
    padding-bottom:8px;
    margin-top: -48px;
    transition: all 0.4s linear;
  }
  .show-tab{
    margin-top: 6px;
    padding-bottom:0;
    transition: all 0.4s linear;
  }
  .el-tabs{

    ::v-deep .el-tabs__header{
      margin: 0;
      .el-tabs__item{
        background: white;
      }
      .el-tabs__item:hover{
        transform: scale(1.04,1.06);
      }
      .is-active{
        background: white;
      }
    }
  }

  .el-row{
    flex: 1;
    display: flex;
    min-height: 200px;
    .el-col{
      background: white;
      .col-div{
        padding: 0 8px;
        height:calc(100% - 42px);
        width:100%;
      }
    }
    .el-col:not(:last-child){
      margin-right: 8px;
    }
  }
  .el-row:not(:last-child){
    padding-bottom: 8px;
  }
}
.col-title{
  height: 34px;
  line-height: 34px;
  padding-left: 10px;
  font-weight: bold;
  text-align: left;
  font-size: 15px;
  margin-bottom: 6px;
  color: white;
  background:linear-gradient(180deg,#409eff,#64b1ff);
  .dept-select{
    margin-right: 16px;
    color: white;
    cursor: pointer;
  }
  .dept-select:hover{
    transform: scale(1.04,1.04);
  }
}
.col-table{
  width: 100%;
  text-align: left;
  height: calc(100% - 48px);
  border-collapse: collapse;

  border-spacing: 0;
  td,th{
    font-size: 15px;
    color: black;
    width: 25%;
    border: solid 1px #ccc;
    padding: 6px;
  }
  td{
    text-align: center;
    cursor: pointer;
  }
  td:hover{
    color: white;
    font-weight: bold;
    background: #409eff;
  }
}
.sortList{
  div{
    flex: 1;
    padding:4px 4% 0;
    cursor: pointer;
  }
  p{
    height: 32px;
    line-height: 32px;
    display: flex;
    color: white;
    .num{
      display: inline-block;
      text-align: center;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      box-shadow: 2px 2px 2px rgb(102, 102, 102);
    }
    .content{
      padding: 0 10px;
      font-size: 14px;
      flex: 1;
      display: flex;
      span{
        flex: 1;
        text-align: right;
      }
    }
  }
  div:hover{
    background: #eeeeee;
    p{
      transform: scale(1.04,1.04);
    }
  }
}
.basic-div{
  display: flex;
  margin-bottom: 6px;
  flex: 1;
  .itemrow-item1{
    //border:1px solid #81898B;
    flex: 1;

    margin: 10px 0px 10px 40px;
    //border-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius:4px;
    cursor: pointer;
    display: grid;
    text-align: center;
    align-items: center;
    color:black;
    //color:white;
    //background: linear-gradient(180deg,#51c3fb,#99e3fd);
    background: #F38152;
    p{
      font-size: 14px;
    }
    span{
      font-size: 17px;
    }
  }
     .itemrow-item2{
       //border:1px solid #81898B;
       flex: 1;
       margin: 10px 0px 10px 40px;
       //border-radius: 4px;
       border-bottom-left-radius: 4px;
       border-top-left-radius:4px;
       cursor: pointer;
       display: grid;
       text-align: center;
       align-items: center;
       color:black;
       //color:white;
       //background: linear-gradient(180deg,#51c3fb,#99e3fd);
       background: #F9BF55;
       //background: #F1F4FB;
       p{
         font-size: 14px;
       }
       span{
         font-size: 17px;
       }
     }
  .itemrow-item{
    //border:1px solid #81898B;
    flex: 1;
    margin: 10px 10px 10px 10px;
    border-radius: 4px;
    cursor: pointer;
    display: grid;
    text-align: center;
    align-items: center;
    //color:black;
    color:white;
    //background: linear-gradient(180deg,#51c3fb,#99e3fd);
    background: #51c3fb;
    p{
      font-size: 10px;
    }
    span{
      font-size: 20px;
    }
  }
  .itemrow-item:nth-child(odd){
    //background: linear-gradient(180deg,#939bf8,#d1d4f8);
    background: #939bf8;
  }
  .itemrow-item:hover{
    transform: scale(1.06,1.06);
  }
}
.el-icon-s-data{
  margin-right: 10px;
  font-size: 18px;
}
.tableClass{
  position: absolute;
  width: 10px;
  height: 10px;
  top:0;
  left: 0;
  background: white;
  background: rgb(212, 212, 212);
  z-index: 3;
  overflow: hidden;
  transition: all 0.4s linear;
}
.bigtable{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2003;
}
.tableClass-top{
  height: 36px;
  line-height: 36px;
  padding-left: 14px;
  font-size: 15px;
  color:#409eff;
  background: white;
  .el-icon-close{
    position: absolute;
    font-size: 24px;
    cursor: pointer;
    color: black;
    right: 14px;
    top: 6px;
  }
}
.dialog-look {
  .el-dialog__body {
    height: calc(80vh - 1px);
    .base-table {
      height: 470px!important;
    }
  }
}
#customers {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}
#customers td, #customers th {
  border: 1px solid #DFE6EC;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
}
#customers tr td:nth-child(odd){
  width: 120px;
  white-space: nowrap;
  padding-left: 20px;
  padding-right: 26px;
  text-align: right;
  background: #E9F2FC;
}
#customers tr td:nth-child(even){
  padding-left: 20px;
  padding-right: 20px;
}
.dialog_box #customers tr td.file-box {
  width: 100%;
  text-align: left;
  background: #ffffff;
}
#customers .file-content {
  min-height: 187px;
}

.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;/* 开关中字体颜色 */
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  /* 开关中关（OFF）字体距离开关左面的距离
		放大OFF将会向右移动缩小向左移动*/
  left: 20px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  /* 开关中开（ON）字体距离开关左面的距离
   与上面一样
  */
  left: -5px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  /* 开关的长度*/
  width: 60px !important;
}

.p_title{
  font-weight: 550;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 8px;
  margin-left: 18px;
}
.sidebar-logo-container {
  position: relative;
  width: 100%;
  // height: 65px;
  // line-height: 65px;
  // background: #3a475b;
  background: #0c2656;
  // border-bottom: 1px solid #2b3c47;
  // border-right: 1px solid #2b3c47;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;

    & .sidebar-logo {
      width: 100%;
      vertical-align: middle;
      margin-right: 12px;
    }

    & .system-name {
      padding-left: 32px;
      text-align: left;
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      color: #fff;
      border-bottom: 1px solid #1B3970;
      background-color: #0f2e68;
      .system-logo {
        margin-right: 5px !important;
        color: #ffffff;
      }
    }

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff;
      font-weight: 600;
      line-height: 65px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  }

  &.collapse {
    .sidebar-logo {
      margin-right: 0px;
    }
  }
}
</style>
